
<template>
	<div class="home">
		<div class="home-header">
			<div class="header-item">
				<div class="img-info">
					<div class="img-icon">
						<img src="../../assets/111111.png" alt="" />
					</div>
					<div class="img-title">课程进度</div>
				</div>
				<div class="time-info">
					<div class="text-item">
						<div class="text-title">必修课:</div>
						<div class="text-info">已学完课程<span>3</span>/12</div>
					</div>
					<div class="text-item">
						<div class="text-title">选修课:</div>
						<div class="text-info">已学完课程<span>3</span>/12</div>
					</div>
				</div>
			</div>
      
			<div class="header-item">
				<div class="img-info">
					<div class="img-icon">
						
						<img src="../../assets/222222.png" alt=""/>
					</div>
					<div class="img-title">学习时长</div>
				</div>
				<div class="time-info">
					<div class="text-item">
						<div class="text-title">今日:</div>
						<div class="text-info"><span>0</span>分钟<span>0</span>秒</div>
					</div>
					<div class="text-item">
						<div class="text-title">累计:</div>
						<div class="text-info"><span>5</span>分钟<span>28</span>秒</div>
					</div>
				</div>
			</div>
		</div>
		<div class="tag-list">
					<div class="tag-item tag-item-active">
						<span>全部</span>
					</div>
					<div class="tag-item">
						<span>必修课</span>
					</div>
					<div class="tag-item">
						<span>选修课</span>
					</div>
					<div class="tag-item">
						<span>已学完</span>
					</div>
					<div class="tag-item">
						<span>未学完</span>
					</div>
				</div>
				<div class="lesson-list">
					<div class="lesson-item" v-for="item in 20" :key="item">
						<div class="top">
							<div class="image">
								<img src="../../assets/111..png">
							</div>
							<div class="title">
								<div class="text">
									React零基础入门到实战，  完成企业级项目
								</div>
								<div class="tag">
									<el-tag>必修课</el-tag>
								</div>
							</div>
						</div>
						<div class="bottom">
							<el-progress :percentage="50" color="#EE985B"></el-progress>
						</div>
					</div>
				</div>
			</div>
		
		</template>
		<style>
			.home-header {
				width: 1200px;
				margin: 20px auto;
				display: flex;
		
			}
		
			.header-item {
				flex: 1;
				height: 135px;
				border-radius: 15px;
				opacity: 1;
				background: #ffffff;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
				margin: 0 20px;
				padding: 20px;
			}
		
			.img-info,
			.time-info {
				display: flex;
			}
		
			.text-item {
				flex: 1;
				padding-top: 50px;
			}
		
			.text-item div {
				display: inline-block;
				font-family: Han Sans;
				font-size: 14px;
				font-weight: normal;
				line-height: normal;
				align-items: center;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				font-feature-settings: "kern" on;
				color: #a47878;
			}
		
			.text-item span {
		
				font-family: Han Sans;
				font-size: 18px;
				font-weight: 900;
				line-height: normal;
				align-items: center;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				font-feature-settings: "kern" on;
				color: #3d3d3d;
			}
		
			.img-info {
				display: flex;
			}
		
			.img-title {
				font-family: Source Han Sans;
				font-size: 36px;
				font-weight: bold;
				line-height: normal;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				font-feature-settings: "kern" no;
				color: #3d3d3d;
				padding-left: 20px;
			}
			.tag-list {
				display: flex;
			}
			.tag-item {
				width: 200px;
				text-align: center;
			}
			.tag-item-active {
				color: #EE985B;
			}
			.tag-item-active span {
				border-bottom: 2px solid #EE985B;
			}
			.lesson-list{
				width: 1200px;
				margin: 20px auto;
				margin-top: 50px;
				display: grid;
				grid-template-columns: repeat(3 ,33%);
				grid-row-gap: 20px;
			}
			.lesson-item {
				width: 350px;
				border: 1px solid #eee;
				border-radius: 20px;
				box-shadow: 0 0 10px #eee;
				padding: 20px;
			}
			.lesson-item .top {
				display: flex;
			}
			.lesson-item .top .image img {
				width: 120px;
				height: 90px;
			}
			.lesson-item .top .title {
				margin-left: 20px;
			}
			.lesson-item .top .title .tag {
				margin-top: 10px;
			}
		</style>
		<script>
			export default {
				name: "HomeView",
				components: {},
				methods: {}
			};
		</script>